<!-- 评论列表 -->
<template>
	<view class="page_box">
<!--		<view class="head_box u-flex">-->
<!--			<button :class="{ 'btn-active': typeCurrent === t.code }" class="u-reset-button type-btn" @tap="selType(t.code)" v-for="t in commentTypeList" :key="t.code">-->
<!--				{{ t.name }}({{ t.num }})-->
<!--			</button>-->
<!--		</view>-->
    <view class="tag-box" >
      <!-- 每行三个 -->
      <view class="hang-box" :class="{'allheight': allheight}">
        <!-- <view class="" style="height: 100%;display: flex;flex-wrap: wrap; transition: all .3s;"> -->
        <view
            v-for="item in listData"
            :class="{'active':selectId == item.index}"
            class="tit-box"
            @click="selectId = item.index"
        >
          {{item.name}}
          ({{total}})
          <!-- </view> -->
        </view>
      </view>
      <view class="up-box" v-if="listData.length > 3">
        <view
            class=""
            @click="allheight = !allheight"
            style="font-size: 25rpx;"
        >
          {{allheight ? '收起' : '查看更多'}}
        </view>
      </view>
    </view>
		<view class="content_box">
			<scroll-view scroll-y="true" enable-back-to-top @scrolltolower="loadMore" class="scroll-box">
				<view class="comment-list">
					<block v-for="comment in commentList" :key="comment.id">
            <sh-comment :comment="comment"></sh-comment>
          </block>
				</view>
				<ljshop-empty v-if="isEmpty" :image="$IMG_URL + '/imgs/empty/comment_empty.png'" tipText="暂无此类评价~"></ljshop-empty>
				<!-- 加载更多 -->
<!--				<u-loadmore v-if="commentList.length" height="80rpx" :status="loadStatus" icon-type="flower" color="#ccc" />-->
			</scroll-view>
		</view>
	</view>
</template>

<script>
import shComment from '../components/sh-comment.vue';
export default {
	components: {
		shComment
	},
	data() {
		return {
			isEmpty: false,
			typeCurrent: 'all',
			commentList: [],
			commentTypeList: [],
      total:0,
			loadStatus: 'loadmore', //loadmore-加载前的状态，loading-加载中的状态，nomore-没有更多的状态
			currentPage: 1,
			lastPage: 1,
      listData:[
        {
          name:'全部',
          num:'1',
          index:1,
        },
        // {
        // 	name:'全部(2305)',
        // 	index:2,
        // },
        // {
        // 	name:'全部(2305)',
        // 	index:3,
        // },
        // {
        // 	name:'全部(2305)',
        // 	index:4,
        // },
      ],
      selectId:1,
		};
	},
	computed: {},
	onLoad() {
		this.getCommentList();
	},
	methods: {
		selType(id) {
			if (this.typeCurrent !== id) {
				this.typeCurrent = id;
				this.commentList = [];
				this.currentPage = 1;
				this.getCommentList();
			}
		},
		// 评价类型
		getCommentType() {
			let that = this;
			that.$http('goods.commentList', {
        productId: that.$Route.query.goodsId
			}).then(res => {
				if (res.code === 1) {
					that.commentTypeList = res.data;
					that.getCommentList();
				}
			});
		},
		// 商品评论
		getCommentList() {
			let that = this;
			that.loadStatus = 'loading';
			that.$http('goods.commentList', {
        productId: that.$Route.query.goodsId,
			}, '加载中...').then(res => {
				if (res.code == 1) {
					that.commentList = res.data.data
          that.total = res.data.total
					// that.isEmpty = !that.commentList.length;
					// that.lastPage = res.data.last_page;
					// that.loadStatus = that.currentPage < res.data.last_page ? 'loadmore' : 'nomore';
				}
			});
		},
		// 加载更多
		loadMore() {
			if (this.currentPage < this.lastPage) {
				this.currentPage += 1;
				this.getCommentList();
			}
		}
	}
};
</script>

<style lang="scss">
.empty-box {
	position: fixed;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}
.head_box {
	height: 114rpx;
	background-color: #fff;
	padding: 0 20rpx;
	.type-btn {
		width: 130rpx;
		line-height: 62rpx;
		background: rgba(238, 238, 238, 1);
		border-radius: 31rpx;
		border: none;
		font-size: 28rpx;

		font-weight: 400;
		color: rgba(153, 153, 153, 1);
		padding: 0;
		margin-right: 10rpx;
	}
	.btn-active {
		background: linear-gradient(90deg, rgba(233, 180, 97, 1), rgba(238, 204, 137, 1));
		box-shadow: 0px 7rpx 6rpx 0px rgba(229, 138, 0, 0.22);
		color: #a8700d;
	}
}
.comment-list {
	margin-top: 20rpx;
}
.tag-box{
  background-color: #fff;
  // padding-bottom: 50rpx;

  .hang-box{
    // transition: all .3s;
    position: relative;
    padding: 0 30rpx 0 30rpx;
    height: 80rpx;
    // height: 100%;
    overflow: hidden;
    display: flex;
    align-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    padding-bottom: 50rpx;
    .tit-box{
      margin-top: 20rpx;
      font-size: 26rpx;
      height: 50rpx;
      line-height: 50rpx;
      border-radius: 15rpx;
      color: #545651;
      background-color: #fbeded;
      padding: 0 20rpx 0 20rpx;
      margin-right: 40rpx;
    }
  }
  .up-box{
    height: 50rpx;
    margin-top: 20rpx;
    padding-bottom: 20rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    // position: absolute;
    // bottom: -10rpx;
    // left: 0;
  }
}
.active{
  color: #fff !important;
  background-color: #de392d !important;
}
.allheight{
  transition: all .3s !important;
  height: 100% !important;
}
</style>
